<template>
  <page-wrap back title="AI面评" hide-tab stay-still :hideSafeArea="true" :bg-color="uNavColor">
    <image class="background-pic" :src="defBgLink"></image>
    <div class="screen">
      <div class="conter">
        <span class="interviewTitle">{{ info.interviewTitle }}</span>
        <span class="interviewTime">{{ info.validStartTime }} - {{ info.validEndTime }}</span>
        <span class="interviewTip">{{ defText1 }}</span>
        <div class="inputarea">
          <div class="input-box">
            <div class="css-name">姓名：</div>
            <input id="css-input" class="css-input" @input="handleInputName" value="" placeholder="请填写您的姓名" />
          </div>
        </div>
        <u-button class="interviewBegin" type="error" @click="nextStep">下一步</u-button>
      </div>

      <u-modal v-model="showdefText2" :content="defText2" @confirm="clickModelConfirm"></u-modal>
      <!-- <u-mask show="show">
        <u-loading mode="flower"></u-loading>
      </u-mask> -->

      <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack"></LoginDialog>
    </div>
  </page-wrap>
</template>

<script>
import LoginDialog from '@/components/LoginDialog';
import common from '@/api/common.js';
import { extractParams } from '@/utils/handle.js';
// import { Loading } from "vant";
import { getAIInterviewInfo, beginInterview } from '@/api/modules/company.js';
import { getPersonDetail } from '@/api/index';

export default {
  components: {
    // [Loading.name]: Loading,
    LoginDialog,
  },

  data() {
    return {
      defBgLink: this.$imgBaseSelf + 'aiInterview/headerBggril.png',
      defText1: '同学你好！欢迎参加本次面试，为保证企业后续能与您及时取得联系，请您先填写以下信息',
      defText2:
        '为了使您所面试的企业对您的表现进行后续评估，您作答的言论和视频(含人脸头像)将同步到AI面评平台系统中进行保留。您的人脸信息属于敏感个人信息，点击“确定”代表您充分知悉并同意我们基于上述目的处理上述信息。',
      showdefText2: true,
      isLoading: false,

      interviewNumber: '170289465304', // 面试号
      userIphone: '',
      userName: '',

      info: {
        interviewTitle: '专题面试',
        questionNumTotal: 0,
        questionUseNumTotal: 0,
        validEndTime: '',
        validStartTime: '',
        questionNumTotal: 3, // 共多少题
        questionUseNumTotal: 0, // 题目使用的总次数
      },
      roomInfo: {},
    };
  },

  onLoad(options) {
    if (options) {
      if (options.num) {
        this.interviewNumber = options.num;
        this.reqGetInfo();
      } else if (options.scene) {
        const scene = decodeURIComponent(options.scene);
        const params = extractParams(scene);
        let num = params['num'] || '';
        if (num) {
          this.interviewNumber = num;
          this.reqGetInfo();
        } else {
          this.defText2 = '分享码有误';
          this.showdefText2 = true;
        }
      }
    }
  },

  methods: {
    getPhoneNumber(data) {
      console.log('----getPhoneNumber', data);
    },
    // 登录
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    loginSuccessBack(obj) {
      let personId = uni.getStorageSync('person-id').slice(2) || undefined;
      this.getPersonDetail(personId);
    },
    getPersonDetail(personId) {
      let param = {
        param: JSON.stringify({
          personId: personId,
        }),
        where: '',
        slaveInfo: 1,
      };
      getPersonDetail(param).then((res) => {
        let info = res.data || res;
        if (info.shouji) {
          this.userIphone = info.shouji;
          this.getInterviewData();
        } else {
          uni.showToast({
            title: '登录数据异常，请稍候再试',
            icon: 'error',
          });
        }
      });
    },

    // 查询面试信息
    reqGetInfo() {
      this.isLoading = true;
      let params = {
        interviewNumber: this.interviewNumber,
      };
      getAIInterviewInfo(params)
        .then((res) => {
          this.isLoading = false;
          if (res.code == 200) {
            var value = res.data;
            value.validEndTime = common.getMinuteTime(value.validEndTime);
            value.validStartTime = common.getMinuteTime(value.validStartTime);
            this.info = value;
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: 'none',
            });
          }
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },

    // 获取直播连接数据
    getInterviewData() {
      let params = {
        interviewNumber: this.interviewNumber,
        personPhone: this.userIphone,
        userName: this.userName,
      };
      beginInterview(params)
        .then((res) => {
          console.log('🚀 ~ file: prepare.vue:124 ~ .then ~ res:', res);
          this.isLoading = false;
          if (res.code == 200) {
            this.roomInfo = res.data;
            if (this.roomInfo.status == 'started') {
              this.gotoNetPage();
            } else {
              uni.showToast({
                title: this.roomInfo.popUp + '',
                icon: 'none',
              });
            }
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: 'none',
            });
          }
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },

    handleInputName(event) {
      this.userName = event.target.value;
    },
    handleInputCode(event) {
      this.interviewNumber = event.target.value;
    },
    nextStep() {
      if (this.userName.length == 0) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none',
        });
        return;
      }

      let shouji = getApp().globalData.userInfo.shouji;
      if (shouji) {
        this.userIphone = shouji;
        this.getInterviewData();
      } else {
        this.showLoginDialog();
      }
    },

    gotoNetPage() {
      let data = {
        phone: this.userIphone,
        num: this.interviewNumber,
        name: this.userName,
        title: this.info.interviewTitle,
        begin: this.info.validStartTime,
        end: this.info.validEndTime,
      };
      uni.redirectTo({
        url: './interviewReady?data=' + JSON.stringify(data),
      });
    },

    clickModelConfirm(obj) {
      console.log('🚀 ~ 点击了弹窗的确定按钮', obj);
    },
  },
};
</script>

<style lang="scss" scoped>
.background-pic {
  width: 100%;
  height: calc(100vw * (476 / 754));
}

.screen {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.centerImg1 {
  width: 100%;
  height: calc(100vw * (476 / 754));
}
.navBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  text-align: center;
  padding-top: 30px;
  font-size: 16px;
  font-weight: bold;
}
.conter {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: initial;
}

.interviewTitle {
  color: #000000;
  font-size: 40rpx;
  font-weight: bold;
  margin-top: 30rpx;
}
.interviewTime {
  color: #333333;
  font-size: 28rpx;
  margin-top: 4rpx;
}
.interviewTip {
  color: #555555;
  font-size: 28rpx;
  text-align: center;
  margin: 32rpx 32rpx 20rpx;
}
.interviewBegin {
  width: 70%;
}

.inputarea {
  width: 100%;
  height: 110px;
}

.input-box {
  display: flex;
  margin: 5px 0px;
}
.css-name {
  width: 15%;
  min-width: 60px;
  text-align: end;
  padding-top: 10px;
  font-size: 12px;
  font-weight: bold;
}
.css-input {
  height: 35px;
  font-size: 12px;
  margin-left: 5px;
  border: none;
  width: 80%;
  border-bottom: 1px solid #f5f5f5;
}

.title {
  color: #222222;
  font-size: 16px;
}
.loading-view {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(222, 222, 222, 0.501);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
